<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>01_jQuery基础</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

</head>
<body>
<div id="container">
    <h1 id="title">jQuery 核心函数</h1>
    <p class="content">这是一个段落</p>
    <button id="btn">点击我</button>
</div>

<script>
    // 不正确的写法：立即执行：alert() 会立即执行，不等DOM加载完成
    jQuery(
        alert("jQuery_1已加载！")
    );
    $(
        alert("jQuery_2已加载！")
    );

    // 正确写法：标准形式
    jQuery(document).ready(function () {
        alert("jQuery_3已加载！");
    });

    //  正确写法：简写形式（最常用）
    $(function () {
        alert("jQuery_4已加载！");
    });



    // 作为DOM就绪函数
    // $(function () {
    //     console.log("DOM已加载");
    //
    //     // 用法2：作为选择器函数
    //     var $title = $("#title");
    //     var $content = $(".content");
    //     var $button = $("button");
    //
    //
    //     // 用法3：转换DOM对象
    //     var domBtn = document.getElementById("btn");
    //     var $jQueryBtn = $(domBtn);
    //
    //     // 使用jQuery方法
    //     $title.css("color", "blue");
    //     $content.html("<strong>修改后的内容</strong>");
    //
    //     $jQueryBtn.click(function () {
    //         alert("按钮被点击了！");
    //     });
    //
    //
    //
    //
    // });
</script>
</body>
</html>
